<template>
  <transition :name="rightRoLeft">
    <div v-if="messageIsShow" :class="['message-container', `message-${type}`]">
      <span class="title" v-text="title"></span>
      <span class="xxx" @click="closeMySelf">×</span>
      <div v-text="msg"></div>
    </div>
  </transition>
</template>
<script>
export default {
  name: 'message3',
  data() {
    return {
      rightRoLeft: 'right',
      title: '',
      msg: '',
      type_2: '',
      messageIsShow: false,
    };
  },
  methods: {
    closeMySelf() {
      this.messageIsShow = false;
    },
  },
};
</script>

<style scoped lang="scss">
  $type: (
    top_left: (left:20px,top:20px),
    top_right: (right:20px,top:20px),
    bottom_left: (left:20px,bottom:50px),
    bottom_right: (right:20px,bottom:50px),
  );
  @each $i in map_keys($type){
    .message-#{$i}{
      position: absolute;
      left: map_get(map_get($type,$i),left);
      right: map_get(map_get($type,$i),right);
      top: map_get(map_get($type,$i),top);
      bottom: map_get(map_get($type,$i),bottom);
    }
  }
  .message-container{
    z-index: 999;
    width: 330px;
    padding: 14px 26px 14px 13px;
    border-radius: 8px;
    box-sizing: border-box;
    border: 1px solid #ebeef5;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    overflow: hidden;
    display: inline-block;
    .title{
      display: inline-block;
      font-weight: bold;
      line-height: 30px;
      width: 270px;
      font-size: 14px;
    }
    .xxx{
      font-size: 18px;
    }
  }
  .right-enter,.right-leave-to{
    transform: translate(340px, 0);
    opacity: 0;
  }
  .right-enter-active,.right-leave-active {
    transition: all .3s ease-in-out;
  }
  .right-enter-to,.right-leave {
    transform: translate(0, 0);
    opacity: 1;
  }
  .left-enter,.left-leave-to{
    transform: translate(-340px, 0);
    opacity: 0;
  }
  .left-enter-active,.left-leave-active {
    transition: all .3s ease-in-out;
  }
  .left-enter-to,.left-leave {
    transform: translate(0, 0);
    opacity: 1;
  }
</style>
